{% load staticfiles %}

{% for field in form %}
    <div class="{{ field.name }}{% if field.errors %} errorField{% endif %}">
        {% if field.label %}
            <label for="{{ field.auto_id }}">{{ field.label }}</label>
        {% endif %}
        {{ field }}
        <ul class="errorInfoWidget">
            {% if field.errors %}

                {% for error in field.errors %}
                    <li>
                        {{ error }}
                    </li>
                {% endfor %}

            {% endif %}
        </ul>
    </div>
{% endfor %}

<style type="text/css">
    div.errorField input[type="text"], div.errorField input[type="password"] {
        border: 1px solid red;
        box-shadow: none;
    }

    div.errorField ul {
        margin: 0 0 10px 20px;
        padding: 0;
        font-size: 12px;
        color: red;
    }
</style>

<script type="text/javascript">
    function errorFieldFocus(widget) {
        widget.focus(function () {
            var div = $(this).parent();
            div.removeClass("errorField");
            div.find(">ul").find(">li").remove();
        });
    }
    $(document).ready(function () {
        var errorDiv = $("form").find("div.errorField");
        errorFieldFocus(errorDiv.find("input[type='text']"));
        errorFieldFocus(errorDiv.find("input[type='password']"));
    });
</script>